+

Icons

Icons should be used to maximize comprehension and reduce cognitive load when you need to call attention to a particular action, command, or section. Our icons are designed with our brand personality baked in.

We have supported 2 types of icons: react and iconify, for iconify you can checkout the web site of iconify for usage and installation

Import

For react icons:
import {Activity} from '@comfortdelgro/compass-icons/react'

For iconify icons:
import {Icon} from '@iconify/react'
import {Activity} from '@comfortdelgro/compass-icons/iconify'

or

For react icons:
import Activity from '@comfortdelgro/compass-icons/react/activity'

For iconify icons:
import {Icon} from '@iconify/react'
import Activity from '@comfortdelgro/compass-icons/iconify/activity'

Usage

<Activity width={20} height={20} color='red' />

or with iconify

<Icon icon={activityIcon} width={20} height={20} />

Filled Icons

Import and Usage

import AddressBookFilled from '@comfortdelgro/compass-icons/react/filled/address-book-filled'
;<AddressBookFilled width={40} height={40} />

or

import {Icon} from '@iconify/react'
import addressBookFilled from '@comfortdelgro/compass-icons/iconify/filled/address-book-filled'
;<Icon icon={addressBookFilled} width={40} height={40} />
address-book-filled
arrow-down-filled
arrow-left-filled
arrow-right-filled
arrow-up-filled
calendar-days-filled
clock-filled
credit-card-filled
duplicate-image-filled
exclamation-filled
group-add-filled
group-settings-filled
heart-filled
image-filled
info-filled
mail-filled
notification-filled
pencil-filled
person-filled
profile-filled
question-filled
star-filled
thumbtack-filled
trash-filled
user-add-filled
warning-filled
Typescript
<AddressBookFilled width={40} height={40} /> 
<Icon icon={addressBookFilled} width={40} height={40} /> 

<ArrowDownFilled width={40} height={40} /> 
<Icon icon={arrowDownFilled} width={40} height={40} /> 

<ArrowLeftFilled width={40} height={40} /> 
<Icon icon={arrowLeftFilled} width={40} height={40} /> 

<ArrowRightFilled width={40} height={40} /> 
<Icon icon={arrowRightFilled} width={40} height={40} /> 

<ArrowUpFilled width={40} height={40} /> 
<Icon icon={arrowUpFilled} width={40} height={40} /> 

<CalendarDaysFilled width={40} height={40} /> 
<Icon icon={calendarDaysFilled} width={40} height={40} /> 

<ClockFilled width={40} height={40} /> 
<Icon icon={clockFilled} width={40} height={40} /> 

<CreditCardFilled width={40} height={40} /> 
<Icon icon={creditCardFilled} width={40} height={40} /> 

<DuplicateImageFilled width={40} height={40} /> 
<Icon icon={duplicateImageFilled} width={40} height={40} /> 

<ExclamationFilled width={40} height={40} /> 
<Icon icon={exclamationFilled} width={40} height={40} /> 

<GroupAddFilled width={40} height={40} /> 
<Icon icon={groupAddFilled} width={40} height={40} /> 

<GroupSettingsFilled width={40} height={40} /> 
<Icon icon={groupSettingsFilled} width={40} height={40} /> 

<HeartFilled width={40} height={40} /> 
<Icon icon={heartFilled} width={40} height={40} /> 

<ImageFilled width={40} height={40} /> 
<Icon icon={imageFilled} width={40} height={40} /> 

<InfoFilled width={40} height={40} /> 
<Icon icon={infoFilled} width={40} height={40} /> 

<MailFilled width={40} height={40} /> 
<Icon icon={mailFilled} width={40} height={40} /> 

<NotificationFilled width={40} height={40} /> 
<Icon icon={notificationFilled} width={40} height={40} /> 

<PencilFilled width={40} height={40} /> 
<Icon icon={pencilFilled} width={40} height={40} /> 

<PersonFilled width={40} height={40} /> 
<Icon icon={personFilled} width={40} height={40} /> 

<ProfileFilled width={40} height={40} /> 
<Icon icon={profileFilled} width={40} height={40} /> 

<QuestionFilled width={40} height={40} /> 
<Icon icon={questionFilled} width={40} height={40} /> 

<StarFilled width={40} height={40} /> 
<Icon icon={starFilled} width={40} height={40} /> 

<ThumbtackFilled width={40} height={40} /> 
<Icon icon={thumbtackFilled} width={40} height={40} /> 

<TrashFilled width={40} height={40} /> 
<Icon icon={trashFilled} width={40} height={40} /> 

<UserAddFilled width={40} height={40} /> 
<Icon icon={userAddFilled} width={40} height={40} /> 

<WarningFilled width={40} height={40} /> 
<Icon icon={warningFilled} width={40} height={40} />

Outline Icons

Import and Usage

import AddressBookOutlined from '@comfortdelgro/compass-icons/react/outlined/address-book-outlined'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import addressBookOutlined from '@comfortdelgro/compass-icons/iconify/outlined/address-book-outlined'
;<Icon icon={addressBookOutlined} width={40} height={40} />
address-book-outlined
arrow-down-outlined
arrow-left-outlined
arrow-right-outlined
arrow-up-outlined
calendar-days-outlined
clock-outlined
credit-card-outlined
duplicate-image-outlined
exclamation-outlined
group-add-outlined
group-settings-outlined
heart-outlined
image-outlined
info-outlined
mail-outlined
notification-outlined
pencil-outlined
person-outlined
profile-outlined
question-outlined
star-outlined
thumbtack-outlined
trash-outlined
user-add-outlined
user-group-outlined
warning-outlined
Typescript
<AddressBookOutlined width={40} height={40} /> 
<Icon icon={addressBookOutlined} width={40} height={40} /> 

<ArrowDownOutlined width={40} height={40} /> 
<Icon icon={arrowDownOutlined} width={40} height={40} /> 

<ArrowLeftOutlined width={40} height={40} /> 
<Icon icon={arrowLeftOutlined} width={40} height={40} /> 

<ArrowRightOutlined width={40} height={40} /> 
<Icon icon={arrowRightOutlined} width={40} height={40} /> 

<ArrowUpOutlined width={40} height={40} /> 
<Icon icon={arrowUpOutlined} width={40} height={40} /> 

<CalendarDaysOutlined width={40} height={40} /> 
<Icon icon={calendarDaysOutlined} width={40} height={40} /> 

<ClockOutlined width={40} height={40} /> 
<Icon icon={clockOutlined} width={40} height={40} /> 

<CreditCardOutlined width={40} height={40} /> 
<Icon icon={creditCardOutlined} width={40} height={40} /> 

<DuplicateImageOutlined width={40} height={40} /> 
<Icon icon={duplicateImageOutlined} width={40} height={40} /> 

<ExclamationOutlined width={40} height={40} /> 
<Icon icon={exclamationOutlined} width={40} height={40} /> 

<GroupAddOutlined width={40} height={40} /> 
<Icon icon={groupAddOutlined} width={40} height={40} /> 

<GroupSettingsOutlined width={40} height={40} /> 
<Icon icon={groupSettingsOutlined} width={40} height={40} /> 

<HeartOutlined width={40} height={40} /> 
<Icon icon={heartOutlined} width={40} height={40} /> 

<ImageOutlined width={40} height={40} /> 
<Icon icon={imageOutlined} width={40} height={40} /> 

<InfoOutlined width={40} height={40} /> 
<Icon icon={infoOutlined} width={40} height={40} /> 

<MailOutlined width={40} height={40} /> 
<Icon icon={mailOutlined} width={40} height={40} /> 

<NotificationOutlined width={40} height={40} /> 
<Icon icon={notificationOutlined} width={40} height={40} /> 

<PencilOutlined width={40} height={40} /> 
<Icon icon={pencilOutlined} width={40} height={40} /> 

<PersonOutlined width={40} height={40} /> 
<Icon icon={personOutlined} width={40} height={40} /> 

<ProfileOutlined width={40} height={40} /> 
<Icon icon={profileOutlined} width={40} height={40} /> 

<QuestionOutlined width={40} height={40} /> 
<Icon icon={questionOutlined} width={40} height={40} /> 

<StarOutlined width={40} height={40} /> 
<Icon icon={starOutlined} width={40} height={40} /> 

<ThumbtackOutlined width={40} height={40} /> 
<Icon icon={thumbtackOutlined} width={40} height={40} /> 

<TrashOutlined width={40} height={40} /> 
<Icon icon={trashOutlined} width={40} height={40} /> 

<UserAddOutlined width={40} height={40} /> 
<Icon icon={userAddOutlined} width={40} height={40} /> 

<UserGroupOutlined width={40} height={40} /> 
<Icon icon={userGroupOutlined} width={40} height={40} /> 

<WarningOutlined width={40} height={40} /> 
<Icon icon={warningOutlined} width={40} height={40} />

Duotone Icons

Import and Usage

import BadgeDollarDuotone from '@comfortdelgro/compass-icons/react/duotone/badge-dollar-duotone'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import badgeDollarDuotone from '@comfortdelgro/compass-icons/iconify/duotone/badge-dollar-duotone'
;<Icon icon={badgeDollarDuotone} width={40} height={40} />
badge-dollar-duotone
calendar-days-duotone
chart-line-up-duotone
chart-pie-duotone
edit-duotone
flag-duotone
gears-duotone
grid-duotone
notification-duotone
org-chart-duotone
password-duotone
trash-duotone
user-duotone
Typescript
<BadgeDollarDuotone width={40} height={40} /> 
<Icon icon={badgeDollarDuotone} width={40} height={40} /> 

<CalendarDaysDuotone width={40} height={40} /> 
<Icon icon={calendarDaysDuotone} width={40} height={40} /> 

<ChartLineUpDuotone width={40} height={40} /> 
<Icon icon={chartLineUpDuotone} width={40} height={40} /> 

<ChartPieDuotone width={40} height={40} /> 
<Icon icon={chartPieDuotone} width={40} height={40} /> 

<EditDuotone width={40} height={40} /> 
<Icon icon={editDuotone} width={40} height={40} /> 

<FlagDuotone width={40} height={40} /> 
<Icon icon={flagDuotone} width={40} height={40} /> 

<GearsDuotone width={40} height={40} /> 
<Icon icon={gearsDuotone} width={40} height={40} /> 

<GridDuotone width={40} height={40} /> 
<Icon icon={gridDuotone} width={40} height={40} /> 

<NotificationDuotone width={40} height={40} /> 
<Icon icon={notificationDuotone} width={40} height={40} /> 

<OrgChartDuotone width={40} height={40} /> 
<Icon icon={orgChartDuotone} width={40} height={40} /> 

<PasswordDuotone width={40} height={40} /> 
<Icon icon={passwordDuotone} width={40} height={40} /> 

<TrashDuotone width={40} height={40} /> 
<Icon icon={trashDuotone} width={40} height={40} /> 

<UserDuotone width={40} height={40} /> 
<Icon icon={userDuotone} width={40} height={40} />

Colorful Icons

Import and Usage

import Compass from '@comfortdelgro/compass-icons/react/colorful/compass'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import compass from '@comfortdelgro/compass-icons/iconify/colorful/compass'
;<Icon icon={compass} width={40} height={40} />
admin-potal-light
admin-potal
caby-portal-light
caby-portal
clubhouse
cms-light
cms
comfort-connect-light
comfort-connect
compass
crown
discord
doctype
dribbble
facebook
figma
fms-light
fms
fnb-light
fnb
google
linkedin
pinterest
reddit
signal
snapchat
telegram
tem-light
tem
tiktok
tumblr
twitter
workbench-light
workbench-text
workbench
youtube
zig-biz-square
zig-biz-tsm
zig-biz-white
zig-biz
zig-store-light
zig-store
Typescript
<AdminPotalLight width={40} height={40} /> 
<Icon icon={adminPotalLight} width={40} height={40} /> 

<AdminPotal width={40} height={40} /> 
<Icon icon={adminPotal} width={40} height={40} /> 

<CabyPortalLight width={40} height={40} /> 
<Icon icon={cabyPortalLight} width={40} height={40} /> 

<CabyPortal width={40} height={40} /> 
<Icon icon={cabyPortal} width={40} height={40} /> 

<Clubhouse width={40} height={40} /> 
<Icon icon={clubhouse} width={40} height={40} /> 

<CmsLight width={40} height={40} /> 
<Icon icon={cmsLight} width={40} height={40} /> 

<Cms width={40} height={40} /> 
<Icon icon={cms} width={40} height={40} /> 

<ComfortConnectLight width={40} height={40} /> 
<Icon icon={comfortConnectLight} width={40} height={40} /> 

<ComfortConnect width={40} height={40} /> 
<Icon icon={comfortConnect} width={40} height={40} /> 

<Compass width={40} height={40} /> 
<Icon icon={compass} width={40} height={40} /> 

<Crown width={40} height={40} /> 
<Icon icon={crown} width={40} height={40} /> 

<Discord width={40} height={40} /> 
<Icon icon={discord} width={40} height={40} /> 

<Doctype width={40} height={40} /> 
<Icon icon={doctype} width={40} height={40} /> 

<Dribbble width={40} height={40} /> 
<Icon icon={dribbble} width={40} height={40} /> 

<Facebook width={40} height={40} /> 
<Icon icon={facebook} width={40} height={40} /> 

<Figma width={40} height={40} /> 
<Icon icon={figma} width={40} height={40} /> 

<FmsLight width={40} height={40} /> 
<Icon icon={fmsLight} width={40} height={40} /> 

<Fms width={40} height={40} /> 
<Icon icon={fms} width={40} height={40} /> 

<FnbLight width={40} height={40} /> 
<Icon icon={fnbLight} width={40} height={40} /> 

<Fnb width={40} height={40} /> 
<Icon icon={fnb} width={40} height={40} /> 

<Google width={40} height={40} /> 
<Icon icon={google} width={40} height={40} /> 

<Linkedin width={40} height={40} /> 
<Icon icon={linkedin} width={40} height={40} /> 

<Pinterest width={40} height={40} /> 
<Icon icon={pinterest} width={40} height={40} /> 

<Reddit width={40} height={40} /> 
<Icon icon={reddit} width={40} height={40} /> 

<Signal width={40} height={40} /> 
<Icon icon={signal} width={40} height={40} /> 

<Snapchat width={40} height={40} /> 
<Icon icon={snapchat} width={40} height={40} /> 

<Telegram width={40} height={40} /> 
<Icon icon={telegram} width={40} height={40} /> 

<TemLight width={40} height={40} /> 
<Icon icon={temLight} width={40} height={40} /> 

<Tem width={40} height={40} /> 
<Icon icon={tem} width={40} height={40} /> 

<Tiktok width={40} height={40} /> 
<Icon icon={tiktok} width={40} height={40} /> 

<Tumblr width={40} height={40} /> 
<Icon icon={tumblr} width={40} height={40} /> 

<Twitter width={40} height={40} /> 
<Icon icon={twitter} width={40} height={40} /> 

<WorkbenchLight width={40} height={40} /> 
<Icon icon={workbenchLight} width={40} height={40} /> 

<WorkbenchText width={40} height={40} /> 
<Icon icon={workbenchText} width={40} height={40} /> 

<Workbench width={40} height={40} /> 
<Icon icon={workbench} width={40} height={40} /> 

<Youtube width={40} height={40} /> 
<Icon icon={youtube} width={40} height={40} /> 

<ZigBizSquare width={40} height={40} /> 
<Icon icon={zigBizSquare} width={40} height={40} /> 

<ZigBizTsm width={40} height={40} /> 
<Icon icon={zigBizTsm} width={40} height={40} /> 

<ZigBizWhite width={40} height={40} /> 
<Icon icon={zigBizWhite} width={40} height={40} /> 

<ZigBiz width={40} height={40} /> 
<Icon icon={zigBiz} width={40} height={40} /> 

<ZigStoreLight width={40} height={40} /> 
<Icon icon={zigStoreLight} width={40} height={40} /> 

<ZigStore width={40} height={40} /> 
<Icon icon={zigStore} width={40} height={40} />

Payment Icons

Import and Usage

import Affirm from '@comfortdelgro/compass-icons/react/payment/affirm'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import affirm from '@comfortdelgro/compass-icons/iconify/payment/affirm'
;<Icon icon={affirm} width={40} height={40} />
affirm
alipay
amazon
amex
apple-pay
bancontact
bitcoin-cash
bitcoin
bitpay
citadele
diners-club
discover
elo
etherium
forbrugsforeningen
giro-pay
google-pay
ideal
interac
jcb
klarna
lightcoin
maestro
mastercard
payoneer
paypal
paysafe
qiwi
sepa
shop-pay
skrill
sofort
stripe
union-pay
verifone
visa
we-chat
web-money
yandex
Typescript
<Affirm width={40} height={40} /> 
<Icon icon={affirm} width={40} height={40} /> 

<Alipay width={40} height={40} /> 
<Icon icon={alipay} width={40} height={40} /> 

<Amazon width={40} height={40} /> 
<Icon icon={amazon} width={40} height={40} /> 

<Amex width={40} height={40} /> 
<Icon icon={amex} width={40} height={40} /> 

<ApplePay width={40} height={40} /> 
<Icon icon={applePay} width={40} height={40} /> 

<Bancontact width={40} height={40} /> 
<Icon icon={bancontact} width={40} height={40} /> 

<BitcoinCash width={40} height={40} /> 
<Icon icon={bitcoinCash} width={40} height={40} /> 

<Bitcoin width={40} height={40} /> 
<Icon icon={bitcoin} width={40} height={40} /> 

<Bitpay width={40} height={40} /> 
<Icon icon={bitpay} width={40} height={40} /> 

<Citadele width={40} height={40} /> 
<Icon icon={citadele} width={40} height={40} /> 

<DinersClub width={40} height={40} /> 
<Icon icon={dinersClub} width={40} height={40} /> 

<Discover width={40} height={40} /> 
<Icon icon={discover} width={40} height={40} /> 

<Elo width={40} height={40} /> 
<Icon icon={elo} width={40} height={40} /> 

<Etherium width={40} height={40} /> 
<Icon icon={etherium} width={40} height={40} /> 

<Forbrugsforeningen width={40} height={40} /> 
<Icon icon={forbrugsforeningen} width={40} height={40} /> 

<GiroPay width={40} height={40} /> 
<Icon icon={giroPay} width={40} height={40} /> 

<GooglePay width={40} height={40} /> 
<Icon icon={googlePay} width={40} height={40} /> 

<Ideal width={40} height={40} /> 
<Icon icon={ideal} width={40} height={40} /> 

<Interac width={40} height={40} /> 
<Icon icon={interac} width={40} height={40} /> 

<Jcb width={40} height={40} /> 
<Icon icon={jcb} width={40} height={40} /> 

<Klarna width={40} height={40} /> 
<Icon icon={klarna} width={40} height={40} /> 

<Lightcoin width={40} height={40} /> 
<Icon icon={lightcoin} width={40} height={40} /> 

<Maestro width={40} height={40} /> 
<Icon icon={maestro} width={40} height={40} /> 

<Mastercard width={40} height={40} /> 
<Icon icon={mastercard} width={40} height={40} /> 

<Payoneer width={40} height={40} /> 
<Icon icon={payoneer} width={40} height={40} /> 

<Paypal width={40} height={40} /> 
<Icon icon={paypal} width={40} height={40} /> 

<Paysafe width={40} height={40} /> 
<Icon icon={paysafe} width={40} height={40} /> 

<Qiwi width={40} height={40} /> 
<Icon icon={qiwi} width={40} height={40} /> 

<Sepa width={40} height={40} /> 
<Icon icon={sepa} width={40} height={40} /> 

<ShopPay width={40} height={40} /> 
<Icon icon={shopPay} width={40} height={40} /> 

<Skrill width={40} height={40} /> 
<Icon icon={skrill} width={40} height={40} /> 

<Sofort width={40} height={40} /> 
<Icon icon={sofort} width={40} height={40} /> 

<Stripe width={40} height={40} /> 
<Icon icon={stripe} width={40} height={40} /> 

<UnionPay width={40} height={40} /> 
<Icon icon={unionPay} width={40} height={40} /> 

<Verifone width={40} height={40} /> 
<Icon icon={verifone} width={40} height={40} /> 

<Visa width={40} height={40} /> 
<Icon icon={visa} width={40} height={40} /> 

<WeChat width={40} height={40} /> 
<Icon icon={weChat} width={40} height={40} /> 

<WebMoney width={40} height={40} /> 
<Icon icon={webMoney} width={40} height={40} /> 

<Yandex width={40} height={40} /> 
<Icon icon={yandex} width={40} height={40} />

Other Icons

Import and Usage

import Activity from '@comfortdelgro/compass-icons/react/activity'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import activity from '@comfortdelgro/compass-icons/iconify/activity'
;<Icon icon={activity} width={40} height={40} />
activity
align-center
align-justify
align-left
align-right
angellist
apple
arrow-down
arrow-left
arrow-right
arrow-up
bid
bold
browser
bug
building
bus-2
bus-and-car
bus
calendar
cancelled
capacity
car
caret-down
caret-left
caret-right
caret-up
chart
chat
cities
clapperboard-play
classification
clipboard
cloud-upload
copy
cross-circle
cross
customer-service
dashboard
deleted
document
download
driver
edit
email
excel
export
eye-slash
eye-solid
face-frown
face-laugh
face-meh
face-sad-tear
face-smile-heart
face-smile
facebook-circular
facebook-square
file-laptop
file-pen
file-signature
file
fill
filter
flag
folder-open
folder
font-colour
font
gauge
gears
github
globe
google
grid
grip-dots
h
h1
h2
h3
h4
h5
h6
hat-wizard
heading
hexagon-xmark
hide
home
hourglass-clock
info-square
inspect
instagram
invoice
italic
job-2
job
key
layers
lightbulb-on
link
linkedin
list-ol
list-ul
list
logout
low-volume
maintenance
map-marked
map-marker
map
menu
message-lines
message
minus-square
minus
money-bill
money-check-alt
money
mute
notification-badge
notification-off
outdent
paste
pause
pdf
pen-nib
phone
pinterest
plus-square
plus
profile-card
profile
project
question-square
quote-left
quote-right
rating-star-0
rating-star-10
rating-star-100
rating-star-20
rating-star-30
rating-star-40
rating-star-50
rating-star-60
rating-star-70
rating-star-80
rating-star-90
refresh
reveal
school
search
settings
shapes
share
shield-2
shield
snapchat
sort-1-to-9-ascending
sort-1-to-9-descending
sort-9-to-1-ascending
sort-9-to-1-descending
sort
sparkle
spreadsheet
stamp
status
store
strikethrough
suitcase
table-columns
table
tags
taxi
text-height
thumb-down
thumb-up
tick-circle
tick
ticket
timeline
twitter
underline
unpin
upload
user-tie
users
verified
volume
word
youtube
zoom-in
zoom-minus
zoom-out
zoom-plus
Typescript
<Activity width={40} height={40} /> 
<Icon icon={activity} width={40} height={40} /> 

<AlignCenter width={40} height={40} /> 
<Icon icon={alignCenter} width={40} height={40} /> 

<AlignJustify width={40} height={40} /> 
<Icon icon={alignJustify} width={40} height={40} /> 

<AlignLeft width={40} height={40} /> 
<Icon icon={alignLeft} width={40} height={40} /> 

<AlignRight width={40} height={40} /> 
<Icon icon={alignRight} width={40} height={40} /> 

<Angellist width={40} height={40} /> 
<Icon icon={angellist} width={40} height={40} /> 

<Apple width={40} height={40} /> 
<Icon icon={apple} width={40} height={40} /> 

<ArrowDown width={40} height={40} /> 
<Icon icon={arrowDown} width={40} height={40} /> 

<ArrowLeft width={40} height={40} /> 
<Icon icon={arrowLeft} width={40} height={40} /> 

<ArrowRight width={40} height={40} /> 
<Icon icon={arrowRight} width={40} height={40} /> 

<ArrowUp width={40} height={40} /> 
<Icon icon={arrowUp} width={40} height={40} /> 

<Bid width={40} height={40} /> 
<Icon icon={bid} width={40} height={40} /> 

<Bold width={40} height={40} /> 
<Icon icon={bold} width={40} height={40} /> 

<Browser width={40} height={40} /> 
<Icon icon={browser} width={40} height={40} /> 

<Bug width={40} height={40} /> 
<Icon icon={bug} width={40} height={40} /> 

<Building width={40} height={40} /> 
<Icon icon={building} width={40} height={40} /> 

<Bus2 width={40} height={40} /> 
<Icon icon={bus-2} width={40} height={40} /> 

<BusAndCar width={40} height={40} /> 
<Icon icon={busAndCar} width={40} height={40} /> 

<Bus width={40} height={40} /> 
<Icon icon={bus} width={40} height={40} /> 

<Calendar width={40} height={40} /> 
<Icon icon={calendar} width={40} height={40} /> 

<Cancelled width={40} height={40} /> 
<Icon icon={cancelled} width={40} height={40} /> 

<Capacity width={40} height={40} /> 
<Icon icon={capacity} width={40} height={40} /> 

<Car width={40} height={40} /> 
<Icon icon={car} width={40} height={40} /> 

<CaretDown width={40} height={40} /> 
<Icon icon={caretDown} width={40} height={40} /> 

<CaretLeft width={40} height={40} /> 
<Icon icon={caretLeft} width={40} height={40} /> 

<CaretRight width={40} height={40} /> 
<Icon icon={caretRight} width={40} height={40} /> 

<CaretUp width={40} height={40} /> 
<Icon icon={caretUp} width={40} height={40} /> 

<Chart width={40} height={40} /> 
<Icon icon={chart} width={40} height={40} /> 

<Chat width={40} height={40} /> 
<Icon icon={chat} width={40} height={40} /> 

<Cities width={40} height={40} /> 
<Icon icon={cities} width={40} height={40} /> 

<ClapperboardPlay width={40} height={40} /> 
<Icon icon={clapperboardPlay} width={40} height={40} /> 

<Classification width={40} height={40} /> 
<Icon icon={classification} width={40} height={40} /> 

<Clipboard width={40} height={40} /> 
<Icon icon={clipboard} width={40} height={40} /> 

<CloudUpload width={40} height={40} /> 
<Icon icon={cloudUpload} width={40} height={40} /> 

<Copy width={40} height={40} /> 
<Icon icon={copy} width={40} height={40} /> 

<CrossCircle width={40} height={40} /> 
<Icon icon={crossCircle} width={40} height={40} /> 

<Cross width={40} height={40} /> 
<Icon icon={cross} width={40} height={40} /> 

<CustomerService width={40} height={40} /> 
<Icon icon={customerService} width={40} height={40} /> 

<Dashboard width={40} height={40} /> 
<Icon icon={dashboard} width={40} height={40} /> 

<Deleted width={40} height={40} /> 
<Icon icon={deleted} width={40} height={40} /> 

<Document width={40} height={40} /> 
<Icon icon={document} width={40} height={40} /> 

<Download width={40} height={40} /> 
<Icon icon={download} width={40} height={40} /> 

<Driver width={40} height={40} /> 
<Icon icon={driver} width={40} height={40} /> 

<Edit width={40} height={40} /> 
<Icon icon={edit} width={40} height={40} /> 

<Email width={40} height={40} /> 
<Icon icon={email} width={40} height={40} /> 

<Excel width={40} height={40} /> 
<Icon icon={excel} width={40} height={40} /> 

<Export width={40} height={40} /> 
<Icon icon={export} width={40} height={40} /> 

<EyeSlash width={40} height={40} /> 
<Icon icon={eyeSlash} width={40} height={40} /> 

<EyeSolid width={40} height={40} /> 
<Icon icon={eyeSolid} width={40} height={40} /> 

<FaceFrown width={40} height={40} /> 
<Icon icon={faceFrown} width={40} height={40} /> 

<FaceLaugh width={40} height={40} /> 
<Icon icon={faceLaugh} width={40} height={40} /> 

<FaceMeh width={40} height={40} /> 
<Icon icon={faceMeh} width={40} height={40} /> 

<FaceSadTear width={40} height={40} /> 
<Icon icon={faceSadTear} width={40} height={40} /> 

<FaceSmileHeart width={40} height={40} /> 
<Icon icon={faceSmileHeart} width={40} height={40} /> 

<FaceSmile width={40} height={40} /> 
<Icon icon={faceSmile} width={40} height={40} /> 

<FacebookCircular width={40} height={40} /> 
<Icon icon={facebookCircular} width={40} height={40} /> 

<FacebookSquare width={40} height={40} /> 
<Icon icon={facebookSquare} width={40} height={40} /> 

<FileLaptop width={40} height={40} /> 
<Icon icon={fileLaptop} width={40} height={40} /> 

<FilePen width={40} height={40} /> 
<Icon icon={filePen} width={40} height={40} /> 

<FileSignature width={40} height={40} /> 
<Icon icon={fileSignature} width={40} height={40} /> 

<File width={40} height={40} /> 
<Icon icon={file} width={40} height={40} /> 

<Fill width={40} height={40} /> 
<Icon icon={fill} width={40} height={40} /> 

<Filter width={40} height={40} /> 
<Icon icon={filter} width={40} height={40} /> 

<Flag width={40} height={40} /> 
<Icon icon={flag} width={40} height={40} /> 

<FolderOpen width={40} height={40} /> 
<Icon icon={folderOpen} width={40} height={40} /> 

<Folder width={40} height={40} /> 
<Icon icon={folder} width={40} height={40} /> 

<FontColour width={40} height={40} /> 
<Icon icon={fontColour} width={40} height={40} /> 

<Font width={40} height={40} /> 
<Icon icon={font} width={40} height={40} /> 

<Gauge width={40} height={40} /> 
<Icon icon={gauge} width={40} height={40} /> 

<Gears width={40} height={40} /> 
<Icon icon={gears} width={40} height={40} /> 

<Github width={40} height={40} /> 
<Icon icon={github} width={40} height={40} /> 

<Globe width={40} height={40} /> 
<Icon icon={globe} width={40} height={40} /> 

<Google width={40} height={40} /> 
<Icon icon={google} width={40} height={40} /> 

<Grid width={40} height={40} /> 
<Icon icon={grid} width={40} height={40} /> 

<GripDots width={40} height={40} /> 
<Icon icon={gripDots} width={40} height={40} /> 

<H width={40} height={40} /> 
<Icon icon={h} width={40} height={40} /> 

<H1 width={40} height={40} /> 
<Icon icon={h1} width={40} height={40} /> 

<H2 width={40} height={40} /> 
<Icon icon={h2} width={40} height={40} /> 

<H3 width={40} height={40} /> 
<Icon icon={h3} width={40} height={40} /> 

<H4 width={40} height={40} /> 
<Icon icon={h4} width={40} height={40} /> 

<H5 width={40} height={40} /> 
<Icon icon={h5} width={40} height={40} /> 

<H6 width={40} height={40} /> 
<Icon icon={h6} width={40} height={40} /> 

<HatWizard width={40} height={40} /> 
<Icon icon={hatWizard} width={40} height={40} /> 

<Heading width={40} height={40} /> 
<Icon icon={heading} width={40} height={40} /> 

<HexagonXmark width={40} height={40} /> 
<Icon icon={hexagonXmark} width={40} height={40} /> 

<Hide width={40} height={40} /> 
<Icon icon={hide} width={40} height={40} /> 

<Home width={40} height={40} /> 
<Icon icon={home} width={40} height={40} /> 

<HourglassClock width={40} height={40} /> 
<Icon icon={hourglassClock} width={40} height={40} /> 

<InfoSquare width={40} height={40} /> 
<Icon icon={infoSquare} width={40} height={40} /> 

<Inspect width={40} height={40} /> 
<Icon icon={inspect} width={40} height={40} /> 

<Instagram width={40} height={40} /> 
<Icon icon={instagram} width={40} height={40} /> 

<Invoice width={40} height={40} /> 
<Icon icon={invoice} width={40} height={40} /> 

<Italic width={40} height={40} /> 
<Icon icon={italic} width={40} height={40} /> 

<Job2 width={40} height={40} /> 
<Icon icon={job-2} width={40} height={40} /> 

<Job width={40} height={40} /> 
<Icon icon={job} width={40} height={40} /> 

<Key width={40} height={40} /> 
<Icon icon={key} width={40} height={40} /> 

<Layers width={40} height={40} /> 
<Icon icon={layers} width={40} height={40} /> 

<LightbulbOn width={40} height={40} /> 
<Icon icon={lightbulbOn} width={40} height={40} /> 

<Link width={40} height={40} /> 
<Icon icon={link} width={40} height={40} /> 

<Linkedin width={40} height={40} /> 
<Icon icon={linkedin} width={40} height={40} /> 

<ListOl width={40} height={40} /> 
<Icon icon={listOl} width={40} height={40} /> 

<ListUl width={40} height={40} /> 
<Icon icon={listUl} width={40} height={40} /> 

<List width={40} height={40} /> 
<Icon icon={list} width={40} height={40} /> 

<Logout width={40} height={40} /> 
<Icon icon={logout} width={40} height={40} /> 

<LowVolume width={40} height={40} /> 
<Icon icon={lowVolume} width={40} height={40} /> 

<Maintenance width={40} height={40} /> 
<Icon icon={maintenance} width={40} height={40} /> 

<MapMarked width={40} height={40} /> 
<Icon icon={mapMarked} width={40} height={40} /> 

<MapMarker width={40} height={40} /> 
<Icon icon={mapMarker} width={40} height={40} /> 

<Map width={40} height={40} /> 
<Icon icon={map} width={40} height={40} /> 

<Menu width={40} height={40} /> 
<Icon icon={menu} width={40} height={40} /> 

<MessageLines width={40} height={40} /> 
<Icon icon={messageLines} width={40} height={40} /> 

<Message width={40} height={40} /> 
<Icon icon={message} width={40} height={40} /> 

<MinusSquare width={40} height={40} /> 
<Icon icon={minusSquare} width={40} height={40} /> 

<Minus width={40} height={40} /> 
<Icon icon={minus} width={40} height={40} /> 

<MoneyBill width={40} height={40} /> 
<Icon icon={moneyBill} width={40} height={40} /> 

<MoneyCheckAlt width={40} height={40} /> 
<Icon icon={moneyCheckAlt} width={40} height={40} /> 

<Money width={40} height={40} /> 
<Icon icon={money} width={40} height={40} /> 

<Mute width={40} height={40} /> 
<Icon icon={mute} width={40} height={40} /> 

<NotificationBadge width={40} height={40} /> 
<Icon icon={notificationBadge} width={40} height={40} /> 

<NotificationOff width={40} height={40} /> 
<Icon icon={notificationOff} width={40} height={40} /> 

<Outdent width={40} height={40} /> 
<Icon icon={outdent} width={40} height={40} /> 

<Paste width={40} height={40} /> 
<Icon icon={paste} width={40} height={40} /> 

<Pause width={40} height={40} /> 
<Icon icon={pause} width={40} height={40} /> 

<Pdf width={40} height={40} /> 
<Icon icon={pdf} width={40} height={40} /> 

<PenNib width={40} height={40} /> 
<Icon icon={penNib} width={40} height={40} /> 

<Phone width={40} height={40} /> 
<Icon icon={phone} width={40} height={40} /> 

<Pinterest width={40} height={40} /> 
<Icon icon={pinterest} width={40} height={40} /> 

<PlusSquare width={40} height={40} /> 
<Icon icon={plusSquare} width={40} height={40} /> 

<Plus width={40} height={40} /> 
<Icon icon={plus} width={40} height={40} /> 

<ProfileCard width={40} height={40} /> 
<Icon icon={profileCard} width={40} height={40} /> 

<Profile width={40} height={40} /> 
<Icon icon={profile} width={40} height={40} /> 

<Project width={40} height={40} /> 
<Icon icon={project} width={40} height={40} /> 

<QuestionSquare width={40} height={40} /> 
<Icon icon={questionSquare} width={40} height={40} /> 

<QuoteLeft width={40} height={40} /> 
<Icon icon={quoteLeft} width={40} height={40} /> 

<QuoteRight width={40} height={40} /> 
<Icon icon={quoteRight} width={40} height={40} /> 

<RatingStar0 width={40} height={40} /> 
<Icon icon={ratingStar-0} width={40} height={40} /> 

<RatingStar10 width={40} height={40} /> 
<Icon icon={ratingStar-10} width={40} height={40} /> 

<RatingStar100 width={40} height={40} /> 
<Icon icon={ratingStar-100} width={40} height={40} /> 

<RatingStar20 width={40} height={40} /> 
<Icon icon={ratingStar-20} width={40} height={40} /> 

<RatingStar30 width={40} height={40} /> 
<Icon icon={ratingStar-30} width={40} height={40} /> 

<RatingStar40 width={40} height={40} /> 
<Icon icon={ratingStar-40} width={40} height={40} /> 

<RatingStar50 width={40} height={40} /> 
<Icon icon={ratingStar-50} width={40} height={40} /> 

<RatingStar60 width={40} height={40} /> 
<Icon icon={ratingStar-60} width={40} height={40} /> 

<RatingStar70 width={40} height={40} /> 
<Icon icon={ratingStar-70} width={40} height={40} /> 

<RatingStar80 width={40} height={40} /> 
<Icon icon={ratingStar-80} width={40} height={40} /> 

<RatingStar90 width={40} height={40} /> 
<Icon icon={ratingStar-90} width={40} height={40} /> 

<Refresh width={40} height={40} /> 
<Icon icon={refresh} width={40} height={40} /> 

<Reveal width={40} height={40} /> 
<Icon icon={reveal} width={40} height={40} /> 

<School width={40} height={40} /> 
<Icon icon={school} width={40} height={40} /> 

<Search width={40} height={40} /> 
<Icon icon={search} width={40} height={40} /> 

<Settings width={40} height={40} /> 
<Icon icon={settings} width={40} height={40} /> 

<Shapes width={40} height={40} /> 
<Icon icon={shapes} width={40} height={40} /> 

<Share width={40} height={40} /> 
<Icon icon={share} width={40} height={40} /> 

<Shield2 width={40} height={40} /> 
<Icon icon={shield-2} width={40} height={40} /> 

<Shield width={40} height={40} /> 
<Icon icon={shield} width={40} height={40} /> 

<Snapchat width={40} height={40} /> 
<Icon icon={snapchat} width={40} height={40} /> 

<Sort1To9Ascending width={40} height={40} /> 
<Icon icon={sort-1To-9Ascending} width={40} height={40} /> 

<Sort1To9Descending width={40} height={40} /> 
<Icon icon={sort-1To-9Descending} width={40} height={40} /> 

<Sort9To1Ascending width={40} height={40} /> 
<Icon icon={sort-9To-1Ascending} width={40} height={40} /> 

<Sort9To1Descending width={40} height={40} /> 
<Icon icon={sort-9To-1Descending} width={40} height={40} /> 

<Sort width={40} height={40} /> 
<Icon icon={sort} width={40} height={40} /> 

<Sparkle width={40} height={40} /> 
<Icon icon={sparkle} width={40} height={40} /> 

<Spreadsheet width={40} height={40} /> 
<Icon icon={spreadsheet} width={40} height={40} /> 

<Stamp width={40} height={40} /> 
<Icon icon={stamp} width={40} height={40} /> 

<Status width={40} height={40} /> 
<Icon icon={status} width={40} height={40} /> 

<Store width={40} height={40} /> 
<Icon icon={store} width={40} height={40} /> 

<Strikethrough width={40} height={40} /> 
<Icon icon={strikethrough} width={40} height={40} /> 

<Suitcase width={40} height={40} /> 
<Icon icon={suitcase} width={40} height={40} /> 

<TableColumns width={40} height={40} /> 
<Icon icon={tableColumns} width={40} height={40} /> 

<Table width={40} height={40} /> 
<Icon icon={table} width={40} height={40} /> 

<Tags width={40} height={40} /> 
<Icon icon={tags} width={40} height={40} /> 

<Taxi width={40} height={40} /> 
<Icon icon={taxi} width={40} height={40} /> 

<TextHeight width={40} height={40} /> 
<Icon icon={textHeight} width={40} height={40} /> 

<ThumbDown width={40} height={40} /> 
<Icon icon={thumbDown} width={40} height={40} /> 

<ThumbUp width={40} height={40} /> 
<Icon icon={thumbUp} width={40} height={40} /> 

<TickCircle width={40} height={40} /> 
<Icon icon={tickCircle} width={40} height={40} /> 

<Tick width={40} height={40} /> 
<Icon icon={tick} width={40} height={40} /> 

<Ticket width={40} height={40} /> 
<Icon icon={ticket} width={40} height={40} /> 

<Timeline width={40} height={40} /> 
<Icon icon={timeline} width={40} height={40} /> 

<Twitter width={40} height={40} /> 
<Icon icon={twitter} width={40} height={40} /> 

<Underline width={40} height={40} /> 
<Icon icon={underline} width={40} height={40} /> 

<Unpin width={40} height={40} /> 
<Icon icon={unpin} width={40} height={40} /> 

<Upload width={40} height={40} /> 
<Icon icon={upload} width={40} height={40} /> 

<UserTie width={40} height={40} /> 
<Icon icon={userTie} width={40} height={40} /> 

<Users width={40} height={40} /> 
<Icon icon={users} width={40} height={40} /> 

<Verified width={40} height={40} /> 
<Icon icon={verified} width={40} height={40} /> 

<Volume width={40} height={40} /> 
<Icon icon={volume} width={40} height={40} /> 

<Word width={40} height={40} /> 
<Icon icon={word} width={40} height={40} /> 

<Youtube width={40} height={40} /> 
<Icon icon={youtube} width={40} height={40} /> 

<ZoomIn width={40} height={40} /> 
<Icon icon={zoomIn} width={40} height={40} /> 

<ZoomMinus width={40} height={40} /> 
<Icon icon={zoomMinus} width={40} height={40} /> 

<ZoomOut width={40} height={40} /> 
<Icon icon={zoomOut} width={40} height={40} /> 

<ZoomPlus width={40} height={40} /> 
<Icon icon={zoomPlus} width={40} height={40} />

Country Icons

Import and Usage

import FlagAbw from '@comfortdelgro/compass-icons/react/country/flag-abw'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import flagAbw from '@comfortdelgro/compass-icons/iconify/country/flag-abw'
;<Icon icon={flagAbw} width={40} height={40} />
flag-abw
flag-afg
flag-ago
flag-aia
flag-ala
flag-alb
flag-and
flag-are
flag-arg
flag-arm
flag-asm
flag-ata
flag-atg
flag-aus
flag-aut
flag-aze
flag-bdi
flag-bel
flag-ben
flag-bes
flag-bfa
flag-bgd
flag-bgr
flag-bhr
flag-bhs
flag-bih
flag-blm
flag-blr
flag-blz
flag-bmu
flag-bol
flag-bra
flag-brb
flag-brn
flag-btn
flag-bwa
flag-caf
flag-can
flag-cck
flag-che
flag-chl
flag-chn
flag-civ
flag-cmr
flag-cod
flag-cog
flag-cok
flag-col
flag-com
flag-cpv
flag-cri
flag-cub
flag-cuw
flag-cxr
flag-cym
flag-cyp
flag-cze
flag-deu
flag-dji
flag-dma
flag-dnk
flag-dom
flag-dza
flag-ecu
flag-egy
flag-eri
flag-esh
flag-esp
flag-est
flag-eth
flag-fin
flag-fji
flag-flk
flag-fra
flag-fro
flag-fsm
flag-gab
flag-gbr
flag-geo
flag-ggy
flag-gha
flag-gib
flag-gin
flag-glp
flag-gmb
flag-gnb
flag-gnq
flag-grc
flag-grd
flag-grl
flag-gtm
flag-guf
flag-gum
flag-guy
flag-hkg
flag-hnd
flag-hrv
flag-hti
flag-hun
flag-idn
flag-imn
flag-ind
flag-iot
flag-irl
flag-irn
flag-irq
flag-isl
flag-isr
flag-ita
flag-jam
flag-jey
flag-jor
flag-jpn
flag-kaz
flag-ken
flag-kgz
flag-khm
flag-kir
flag-kna
flag-kor
flag-kos
flag-kwt
flag-lao
flag-lbn
flag-lbr
flag-lby
flag-lca
flag-lie
flag-lka
flag-lso
flag-ltu
flag-lux
flag-lva
flag-mac
flag-maf
flag-mar
flag-mco
flag-mda
flag-mdg
flag-mdv
flag-mex
flag-mhl
flag-mkd
flag-mli
flag-mlt
flag-mmr
flag-mne
flag-mng
flag-mnp
flag-moz
flag-mrt
flag-msr
flag-mtq
flag-mus
flag-mwi
flag-mys
flag-myt
flag-nam
flag-ncl
flag-ner
flag-nfk
flag-nga
flag-nic
flag-niu
flag-nld
flag-nor
flag-npl
flag-nru
flag-nzl
flag-omn
flag-pak
flag-pan
flag-pcn
flag-per
flag-phl
flag-plw
flag-png
flag-pol
flag-pri
flag-prk
flag-prt
flag-pry
flag-pse
flag-pyf
flag-qat
flag-reu
flag-rou
flag-rus
flag-rwa
flag-sau
flag-sdn
flag-sen
flag-sgp
flag-sgs
flag-shn
flag-sjm
flag-slb
flag-sle
flag-slv
flag-smr
flag-som
flag-spm
flag-srb
flag-ssd
flag-stp
flag-sur
flag-svk
flag-svn
flag-swe
flag-swz
flag-sxm
flag-syc
flag-syr
flag-tca
flag-tcd
flag-tgo
flag-tha
flag-tjk
flag-tkl
flag-tkm
flag-tls
flag-ton
flag-tto
flag-tun
flag-tur
flag-tuv
flag-twn
flag-tza
flag-uga
flag-ukr
flag-ury
flag-usa
flag-uzb
flag-vat
flag-vct
flag-ven
flag-vgb
flag-vir
flag-vnm
flag-vut
flag-wlf
flag-wsm
flag-yem
flag-zaf
flag-zmb
flag-zwe
Typescript
<FlagAbw width={40} height={40} /> 
<Icon icon={flagAbw} width={40} height={40} /> 

<FlagAfg width={40} height={40} /> 
<Icon icon={flagAfg} width={40} height={40} /> 

<FlagAgo width={40} height={40} /> 
<Icon icon={flagAgo} width={40} height={40} /> 

<FlagAia width={40} height={40} /> 
<Icon icon={flagAia} width={40} height={40} /> 

<FlagAla width={40} height={40} /> 
<Icon icon={flagAla} width={40} height={40} /> 

<FlagAlb width={40} height={40} /> 
<Icon icon={flagAlb} width={40} height={40} /> 

<FlagAnd width={40} height={40} /> 
<Icon icon={flagAnd} width={40} height={40} /> 

<FlagAre width={40} height={40} /> 
<Icon icon={flagAre} width={40} height={40} /> 

<FlagArg width={40} height={40} /> 
<Icon icon={flagArg} width={40} height={40} /> 

<FlagArm width={40} height={40} /> 
<Icon icon={flagArm} width={40} height={40} /> 

<FlagAsm width={40} height={40} /> 
<Icon icon={flagAsm} width={40} height={40} /> 

<FlagAta width={40} height={40} /> 
<Icon icon={flagAta} width={40} height={40} /> 

<FlagAtg width={40} height={40} /> 
<Icon icon={flagAtg} width={40} height={40} /> 

<FlagAus width={40} height={40} /> 
<Icon icon={flagAus} width={40} height={40} /> 

<FlagAut width={40} height={40} /> 
<Icon icon={flagAut} width={40} height={40} /> 

<FlagAze width={40} height={40} /> 
<Icon icon={flagAze} width={40} height={40} /> 

<FlagBdi width={40} height={40} /> 
<Icon icon={flagBdi} width={40} height={40} /> 

<FlagBel width={40} height={40} /> 
<Icon icon={flagBel} width={40} height={40} /> 

<FlagBen width={40} height={40} /> 
<Icon icon={flagBen} width={40} height={40} /> 

<FlagBes width={40} height={40} /> 
<Icon icon={flagBes} width={40} height={40} /> 

<FlagBfa width={40} height={40} /> 
<Icon icon={flagBfa} width={40} height={40} /> 

<FlagBgd width={40} height={40} /> 
<Icon icon={flagBgd} width={40} height={40} /> 

<FlagBgr width={40} height={40} /> 
<Icon icon={flagBgr} width={40} height={40} /> 

<FlagBhr width={40} height={40} /> 
<Icon icon={flagBhr} width={40} height={40} /> 

<FlagBhs width={40} height={40} /> 
<Icon icon={flagBhs} width={40} height={40} /> 

<FlagBih width={40} height={40} /> 
<Icon icon={flagBih} width={40} height={40} /> 

<FlagBlm width={40} height={40} /> 
<Icon icon={flagBlm} width={40} height={40} /> 

<FlagBlr width={40} height={40} /> 
<Icon icon={flagBlr} width={40} height={40} /> 

<FlagBlz width={40} height={40} /> 
<Icon icon={flagBlz} width={40} height={40} /> 

<FlagBmu width={40} height={40} /> 
<Icon icon={flagBmu} width={40} height={40} /> 

<FlagBol width={40} height={40} /> 
<Icon icon={flagBol} width={40} height={40} /> 

<FlagBra width={40} height={40} /> 
<Icon icon={flagBra} width={40} height={40} /> 

<FlagBrb width={40} height={40} /> 
<Icon icon={flagBrb} width={40} height={40} /> 

<FlagBrn width={40} height={40} /> 
<Icon icon={flagBrn} width={40} height={40} /> 

<FlagBtn width={40} height={40} /> 
<Icon icon={flagBtn} width={40} height={40} /> 

<FlagBwa width={40} height={40} /> 
<Icon icon={flagBwa} width={40} height={40} /> 

<FlagCaf width={40} height={40} /> 
<Icon icon={flagCaf} width={40} height={40} /> 

<FlagCan width={40} height={40} /> 
<Icon icon={flagCan} width={40} height={40} /> 

<FlagCck width={40} height={40} /> 
<Icon icon={flagCck} width={40} height={40} /> 

<FlagChe width={40} height={40} /> 
<Icon icon={flagChe} width={40} height={40} /> 

<FlagChl width={40} height={40} /> 
<Icon icon={flagChl} width={40} height={40} /> 

<FlagChn width={40} height={40} /> 
<Icon icon={flagChn} width={40} height={40} /> 

<FlagCiv width={40} height={40} /> 
<Icon icon={flagCiv} width={40} height={40} /> 

<FlagCmr width={40} height={40} /> 
<Icon icon={flagCmr} width={40} height={40} /> 

<FlagCod width={40} height={40} /> 
<Icon icon={flagCod} width={40} height={40} /> 

<FlagCog width={40} height={40} /> 
<Icon icon={flagCog} width={40} height={40} /> 

<FlagCok width={40} height={40} /> 
<Icon icon={flagCok} width={40} height={40} /> 

<FlagCol width={40} height={40} /> 
<Icon icon={flagCol} width={40} height={40} /> 

<FlagCom width={40} height={40} /> 
<Icon icon={flagCom} width={40} height={40} /> 

<FlagCpv width={40} height={40} /> 
<Icon icon={flagCpv} width={40} height={40} /> 

<FlagCri width={40} height={40} /> 
<Icon icon={flagCri} width={40} height={40} /> 

<FlagCub width={40} height={40} /> 
<Icon icon={flagCub} width={40} height={40} /> 

<FlagCuw width={40} height={40} /> 
<Icon icon={flagCuw} width={40} height={40} /> 

<FlagCxr width={40} height={40} /> 
<Icon icon={flagCxr} width={40} height={40} /> 

<FlagCym width={40} height={40} /> 
<Icon icon={flagCym} width={40} height={40} /> 

<FlagCyp width={40} height={40} /> 
<Icon icon={flagCyp} width={40} height={40} /> 

<FlagCze width={40} height={40} /> 
<Icon icon={flagCze} width={40} height={40} /> 

<FlagDeu width={40} height={40} /> 
<Icon icon={flagDeu} width={40} height={40} /> 

<FlagDji width={40} height={40} /> 
<Icon icon={flagDji} width={40} height={40} /> 

<FlagDma width={40} height={40} /> 
<Icon icon={flagDma} width={40} height={40} /> 

<FlagDnk width={40} height={40} /> 
<Icon icon={flagDnk} width={40} height={40} /> 

<FlagDom width={40} height={40} /> 
<Icon icon={flagDom} width={40} height={40} /> 

<FlagDza width={40} height={40} /> 
<Icon icon={flagDza} width={40} height={40} /> 

<FlagEcu width={40} height={40} /> 
<Icon icon={flagEcu} width={40} height={40} /> 

<FlagEgy width={40} height={40} /> 
<Icon icon={flagEgy} width={40} height={40} /> 

<FlagEri width={40} height={40} /> 
<Icon icon={flagEri} width={40} height={40} /> 

<FlagEsh width={40} height={40} /> 
<Icon icon={flagEsh} width={40} height={40} /> 

<FlagEsp width={40} height={40} /> 
<Icon icon={flagEsp} width={40} height={40} /> 

<FlagEst width={40} height={40} /> 
<Icon icon={flagEst} width={40} height={40} /> 

<FlagEth width={40} height={40} /> 
<Icon icon={flagEth} width={40} height={40} /> 

<FlagFin width={40} height={40} /> 
<Icon icon={flagFin} width={40} height={40} /> 

<FlagFji width={40} height={40} /> 
<Icon icon={flagFji} width={40} height={40} /> 

<FlagFlk width={40} height={40} /> 
<Icon icon={flagFlk} width={40} height={40} /> 

<FlagFra width={40} height={40} /> 
<Icon icon={flagFra} width={40} height={40} /> 

<FlagFro width={40} height={40} /> 
<Icon icon={flagFro} width={40} height={40} /> 

<FlagFsm width={40} height={40} /> 
<Icon icon={flagFsm} width={40} height={40} /> 

<FlagGab width={40} height={40} /> 
<Icon icon={flagGab} width={40} height={40} /> 

<FlagGbr width={40} height={40} /> 
<Icon icon={flagGbr} width={40} height={40} /> 

<FlagGeo width={40} height={40} /> 
<Icon icon={flagGeo} width={40} height={40} /> 

<FlagGgy width={40} height={40} /> 
<Icon icon={flagGgy} width={40} height={40} /> 

<FlagGha width={40} height={40} /> 
<Icon icon={flagGha} width={40} height={40} /> 

<FlagGib width={40} height={40} /> 
<Icon icon={flagGib} width={40} height={40} /> 

<FlagGin width={40} height={40} /> 
<Icon icon={flagGin} width={40} height={40} /> 

<FlagGlp width={40} height={40} /> 
<Icon icon={flagGlp} width={40} height={40} /> 

<FlagGmb width={40} height={40} /> 
<Icon icon={flagGmb} width={40} height={40} /> 

<FlagGnb width={40} height={40} /> 
<Icon icon={flagGnb} width={40} height={40} /> 

<FlagGnq width={40} height={40} /> 
<Icon icon={flagGnq} width={40} height={40} /> 

<FlagGrc width={40} height={40} /> 
<Icon icon={flagGrc} width={40} height={40} /> 

<FlagGrd width={40} height={40} /> 
<Icon icon={flagGrd} width={40} height={40} /> 

<FlagGrl width={40} height={40} /> 
<Icon icon={flagGrl} width={40} height={40} /> 

<FlagGtm width={40} height={40} /> 
<Icon icon={flagGtm} width={40} height={40} /> 

<FlagGuf width={40} height={40} /> 
<Icon icon={flagGuf} width={40} height={40} /> 

<FlagGum width={40} height={40} /> 
<Icon icon={flagGum} width={40} height={40} /> 

<FlagGuy width={40} height={40} /> 
<Icon icon={flagGuy} width={40} height={40} /> 

<FlagHkg width={40} height={40} /> 
<Icon icon={flagHkg} width={40} height={40} /> 

<FlagHnd width={40} height={40} /> 
<Icon icon={flagHnd} width={40} height={40} /> 

<FlagHrv width={40} height={40} /> 
<Icon icon={flagHrv} width={40} height={40} /> 

<FlagHti width={40} height={40} /> 
<Icon icon={flagHti} width={40} height={40} /> 

<FlagHun width={40} height={40} /> 
<Icon icon={flagHun} width={40} height={40} /> 

<FlagIdn width={40} height={40} /> 
<Icon icon={flagIdn} width={40} height={40} /> 

<FlagImn width={40} height={40} /> 
<Icon icon={flagImn} width={40} height={40} /> 

<FlagInd width={40} height={40} /> 
<Icon icon={flagInd} width={40} height={40} /> 

<FlagIot width={40} height={40} /> 
<Icon icon={flagIot} width={40} height={40} /> 

<FlagIrl width={40} height={40} /> 
<Icon icon={flagIrl} width={40} height={40} /> 

<FlagIrn width={40} height={40} /> 
<Icon icon={flagIrn} width={40} height={40} /> 

<FlagIrq width={40} height={40} /> 
<Icon icon={flagIrq} width={40} height={40} /> 

<FlagIsl width={40} height={40} /> 
<Icon icon={flagIsl} width={40} height={40} /> 

<FlagIsr width={40} height={40} /> 
<Icon icon={flagIsr} width={40} height={40} /> 

<FlagIta width={40} height={40} /> 
<Icon icon={flagIta} width={40} height={40} /> 

<FlagJam width={40} height={40} /> 
<Icon icon={flagJam} width={40} height={40} /> 

<FlagJey width={40} height={40} /> 
<Icon icon={flagJey} width={40} height={40} /> 

<FlagJor width={40} height={40} /> 
<Icon icon={flagJor} width={40} height={40} /> 

<FlagJpn width={40} height={40} /> 
<Icon icon={flagJpn} width={40} height={40} /> 

<FlagKaz width={40} height={40} /> 
<Icon icon={flagKaz} width={40} height={40} /> 

<FlagKen width={40} height={40} /> 
<Icon icon={flagKen} width={40} height={40} /> 

<FlagKgz width={40} height={40} /> 
<Icon icon={flagKgz} width={40} height={40} /> 

<FlagKhm width={40} height={40} /> 
<Icon icon={flagKhm} width={40} height={40} /> 

<FlagKir width={40} height={40} /> 
<Icon icon={flagKir} width={40} height={40} /> 

<FlagKna width={40} height={40} /> 
<Icon icon={flagKna} width={40} height={40} /> 

<FlagKor width={40} height={40} /> 
<Icon icon={flagKor} width={40} height={40} /> 

<FlagKos width={40} height={40} /> 
<Icon icon={flagKos} width={40} height={40} /> 

<FlagKwt width={40} height={40} /> 
<Icon icon={flagKwt} width={40} height={40} /> 

<FlagLao width={40} height={40} /> 
<Icon icon={flagLao} width={40} height={40} /> 

<FlagLbn width={40} height={40} /> 
<Icon icon={flagLbn} width={40} height={40} /> 

<FlagLbr width={40} height={40} /> 
<Icon icon={flagLbr} width={40} height={40} /> 

<FlagLby width={40} height={40} /> 
<Icon icon={flagLby} width={40} height={40} /> 

<FlagLca width={40} height={40} /> 
<Icon icon={flagLca} width={40} height={40} /> 

<FlagLie width={40} height={40} /> 
<Icon icon={flagLie} width={40} height={40} /> 

<FlagLka width={40} height={40} /> 
<Icon icon={flagLka} width={40} height={40} /> 

<FlagLso width={40} height={40} /> 
<Icon icon={flagLso} width={40} height={40} /> 

<FlagLtu width={40} height={40} /> 
<Icon icon={flagLtu} width={40} height={40} /> 

<FlagLux width={40} height={40} /> 
<Icon icon={flagLux} width={40} height={40} /> 

<FlagLva width={40} height={40} /> 
<Icon icon={flagLva} width={40} height={40} /> 

<FlagMac width={40} height={40} /> 
<Icon icon={flagMac} width={40} height={40} /> 

<FlagMaf width={40} height={40} /> 
<Icon icon={flagMaf} width={40} height={40} /> 

<FlagMar width={40} height={40} /> 
<Icon icon={flagMar} width={40} height={40} /> 

<FlagMco width={40} height={40} /> 
<Icon icon={flagMco} width={40} height={40} /> 

<FlagMda width={40} height={40} /> 
<Icon icon={flagMda} width={40} height={40} /> 

<FlagMdg width={40} height={40} /> 
<Icon icon={flagMdg} width={40} height={40} /> 

<FlagMdv width={40} height={40} /> 
<Icon icon={flagMdv} width={40} height={40} /> 

<FlagMex width={40} height={40} /> 
<Icon icon={flagMex} width={40} height={40} /> 

<FlagMhl width={40} height={40} /> 
<Icon icon={flagMhl} width={40} height={40} /> 

<FlagMkd width={40} height={40} /> 
<Icon icon={flagMkd} width={40} height={40} /> 

<FlagMli width={40} height={40} /> 
<Icon icon={flagMli} width={40} height={40} /> 

<FlagMlt width={40} height={40} /> 
<Icon icon={flagMlt} width={40} height={40} /> 

<FlagMmr width={40} height={40} /> 
<Icon icon={flagMmr} width={40} height={40} /> 

<FlagMne width={40} height={40} /> 
<Icon icon={flagMne} width={40} height={40} /> 

<FlagMng width={40} height={40} /> 
<Icon icon={flagMng} width={40} height={40} /> 

<FlagMnp width={40} height={40} /> 
<Icon icon={flagMnp} width={40} height={40} /> 

<FlagMoz width={40} height={40} /> 
<Icon icon={flagMoz} width={40} height={40} /> 

<FlagMrt width={40} height={40} /> 
<Icon icon={flagMrt} width={40} height={40} /> 

<FlagMsr width={40} height={40} /> 
<Icon icon={flagMsr} width={40} height={40} /> 

<FlagMtq width={40} height={40} /> 
<Icon icon={flagMtq} width={40} height={40} /> 

<FlagMus width={40} height={40} /> 
<Icon icon={flagMus} width={40} height={40} /> 

<FlagMwi width={40} height={40} /> 
<Icon icon={flagMwi} width={40} height={40} /> 

<FlagMys width={40} height={40} /> 
<Icon icon={flagMys} width={40} height={40} /> 

<FlagMyt width={40} height={40} /> 
<Icon icon={flagMyt} width={40} height={40} /> 

<FlagNam width={40} height={40} /> 
<Icon icon={flagNam} width={40} height={40} /> 

<FlagNcl width={40} height={40} /> 
<Icon icon={flagNcl} width={40} height={40} /> 

<FlagNer width={40} height={40} /> 
<Icon icon={flagNer} width={40} height={40} /> 

<FlagNfk width={40} height={40} /> 
<Icon icon={flagNfk} width={40} height={40} /> 

<FlagNga width={40} height={40} /> 
<Icon icon={flagNga} width={40} height={40} /> 

<FlagNic width={40} height={40} /> 
<Icon icon={flagNic} width={40} height={40} /> 

<FlagNiu width={40} height={40} /> 
<Icon icon={flagNiu} width={40} height={40} /> 

<FlagNld width={40} height={40} /> 
<Icon icon={flagNld} width={40} height={40} /> 

<FlagNor width={40} height={40} /> 
<Icon icon={flagNor} width={40} height={40} /> 

<FlagNpl width={40} height={40} /> 
<Icon icon={flagNpl} width={40} height={40} /> 

<FlagNru width={40} height={40} /> 
<Icon icon={flagNru} width={40} height={40} /> 

<FlagNzl width={40} height={40} /> 
<Icon icon={flagNzl} width={40} height={40} /> 

<FlagOmn width={40} height={40} /> 
<Icon icon={flagOmn} width={40} height={40} /> 

<FlagPak width={40} height={40} /> 
<Icon icon={flagPak} width={40} height={40} /> 

<FlagPan width={40} height={40} /> 
<Icon icon={flagPan} width={40} height={40} /> 

<FlagPcn width={40} height={40} /> 
<Icon icon={flagPcn} width={40} height={40} /> 

<FlagPer width={40} height={40} /> 
<Icon icon={flagPer} width={40} height={40} /> 

<FlagPhl width={40} height={40} /> 
<Icon icon={flagPhl} width={40} height={40} /> 

<FlagPlw width={40} height={40} /> 
<Icon icon={flagPlw} width={40} height={40} /> 

<FlagPng width={40} height={40} /> 
<Icon icon={flagPng} width={40} height={40} /> 

<FlagPol width={40} height={40} /> 
<Icon icon={flagPol} width={40} height={40} /> 

<FlagPri width={40} height={40} /> 
<Icon icon={flagPri} width={40} height={40} /> 

<FlagPrk width={40} height={40} /> 
<Icon icon={flagPrk} width={40} height={40} /> 

<FlagPrt width={40} height={40} /> 
<Icon icon={flagPrt} width={40} height={40} /> 

<FlagPry width={40} height={40} /> 
<Icon icon={flagPry} width={40} height={40} /> 

<FlagPse width={40} height={40} /> 
<Icon icon={flagPse} width={40} height={40} /> 

<FlagPyf width={40} height={40} /> 
<Icon icon={flagPyf} width={40} height={40} /> 

<FlagQat width={40} height={40} /> 
<Icon icon={flagQat} width={40} height={40} /> 

<FlagReu width={40} height={40} /> 
<Icon icon={flagReu} width={40} height={40} /> 

<FlagRou width={40} height={40} /> 
<Icon icon={flagRou} width={40} height={40} /> 

<FlagRus width={40} height={40} /> 
<Icon icon={flagRus} width={40} height={40} /> 

<FlagRwa width={40} height={40} /> 
<Icon icon={flagRwa} width={40} height={40} /> 

<FlagSau width={40} height={40} /> 
<Icon icon={flagSau} width={40} height={40} /> 

<FlagSdn width={40} height={40} /> 
<Icon icon={flagSdn} width={40} height={40} /> 

<FlagSen width={40} height={40} /> 
<Icon icon={flagSen} width={40} height={40} /> 

<FlagSgp width={40} height={40} /> 
<Icon icon={flagSgp} width={40} height={40} /> 

<FlagSgs width={40} height={40} /> 
<Icon icon={flagSgs} width={40} height={40} /> 

<FlagShn width={40} height={40} /> 
<Icon icon={flagShn} width={40} height={40} /> 

<FlagSjm width={40} height={40} /> 
<Icon icon={flagSjm} width={40} height={40} /> 

<FlagSlb width={40} height={40} /> 
<Icon icon={flagSlb} width={40} height={40} /> 

<FlagSle width={40} height={40} /> 
<Icon icon={flagSle} width={40} height={40} /> 

<FlagSlv width={40} height={40} /> 
<Icon icon={flagSlv} width={40} height={40} /> 

<FlagSmr width={40} height={40} /> 
<Icon icon={flagSmr} width={40} height={40} /> 

<FlagSom width={40} height={40} /> 
<Icon icon={flagSom} width={40} height={40} /> 

<FlagSpm width={40} height={40} /> 
<Icon icon={flagSpm} width={40} height={40} /> 

<FlagSrb width={40} height={40} /> 
<Icon icon={flagSrb} width={40} height={40} /> 

<FlagSsd width={40} height={40} /> 
<Icon icon={flagSsd} width={40} height={40} /> 

<FlagStp width={40} height={40} /> 
<Icon icon={flagStp} width={40} height={40} /> 

<FlagSur width={40} height={40} /> 
<Icon icon={flagSur} width={40} height={40} /> 

<FlagSvk width={40} height={40} /> 
<Icon icon={flagSvk} width={40} height={40} /> 

<FlagSvn width={40} height={40} /> 
<Icon icon={flagSvn} width={40} height={40} /> 

<FlagSwe width={40} height={40} /> 
<Icon icon={flagSwe} width={40} height={40} /> 

<FlagSwz width={40} height={40} /> 
<Icon icon={flagSwz} width={40} height={40} /> 

<FlagSxm width={40} height={40} /> 
<Icon icon={flagSxm} width={40} height={40} /> 

<FlagSyc width={40} height={40} /> 
<Icon icon={flagSyc} width={40} height={40} /> 

<FlagSyr width={40} height={40} /> 
<Icon icon={flagSyr} width={40} height={40} /> 

<FlagTca width={40} height={40} /> 
<Icon icon={flagTca} width={40} height={40} /> 

<FlagTcd width={40} height={40} /> 
<Icon icon={flagTcd} width={40} height={40} /> 

<FlagTgo width={40} height={40} /> 
<Icon icon={flagTgo} width={40} height={40} /> 

<FlagTha width={40} height={40} /> 
<Icon icon={flagTha} width={40} height={40} /> 

<FlagTjk width={40} height={40} /> 
<Icon icon={flagTjk} width={40} height={40} /> 

<FlagTkl width={40} height={40} /> 
<Icon icon={flagTkl} width={40} height={40} /> 

<FlagTkm width={40} height={40} /> 
<Icon icon={flagTkm} width={40} height={40} /> 

<FlagTls width={40} height={40} /> 
<Icon icon={flagTls} width={40} height={40} /> 

<FlagTon width={40} height={40} /> 
<Icon icon={flagTon} width={40} height={40} /> 

<FlagTto width={40} height={40} /> 
<Icon icon={flagTto} width={40} height={40} /> 

<FlagTun width={40} height={40} /> 
<Icon icon={flagTun} width={40} height={40} /> 

<FlagTur width={40} height={40} /> 
<Icon icon={flagTur} width={40} height={40} /> 

<FlagTuv width={40} height={40} /> 
<Icon icon={flagTuv} width={40} height={40} /> 

<FlagTwn width={40} height={40} /> 
<Icon icon={flagTwn} width={40} height={40} /> 

<FlagTza width={40} height={40} /> 
<Icon icon={flagTza} width={40} height={40} /> 

<FlagUga width={40} height={40} /> 
<Icon icon={flagUga} width={40} height={40} /> 

<FlagUkr width={40} height={40} /> 
<Icon icon={flagUkr} width={40} height={40} /> 

<FlagUry width={40} height={40} /> 
<Icon icon={flagUry} width={40} height={40} /> 

<FlagUsa width={40} height={40} /> 
<Icon icon={flagUsa} width={40} height={40} /> 

<FlagUzb width={40} height={40} /> 
<Icon icon={flagUzb} width={40} height={40} /> 

<FlagVat width={40} height={40} /> 
<Icon icon={flagVat} width={40} height={40} /> 

<FlagVct width={40} height={40} /> 
<Icon icon={flagVct} width={40} height={40} /> 

<FlagVen width={40} height={40} /> 
<Icon icon={flagVen} width={40} height={40} /> 

<FlagVgb width={40} height={40} /> 
<Icon icon={flagVgb} width={40} height={40} /> 

<FlagVir width={40} height={40} /> 
<Icon icon={flagVir} width={40} height={40} /> 

<FlagVnm width={40} height={40} /> 
<Icon icon={flagVnm} width={40} height={40} /> 

<FlagVut width={40} height={40} /> 
<Icon icon={flagVut} width={40} height={40} /> 

<FlagWlf width={40} height={40} /> 
<Icon icon={flagWlf} width={40} height={40} /> 

<FlagWsm width={40} height={40} /> 
<Icon icon={flagWsm} width={40} height={40} /> 

<FlagYem width={40} height={40} /> 
<Icon icon={flagYem} width={40} height={40} /> 

<FlagZaf width={40} height={40} /> 
<Icon icon={flagZaf} width={40} height={40} /> 

<FlagZmb width={40} height={40} /> 
<Icon icon={flagZmb} width={40} height={40} /> 

<FlagZwe width={40} height={40} /> 
<Icon icon={flagZwe} width={40} height={40} />

File Icons

Import and Usage

import SVG from '@comfortdelgro/compass-icons/react/file/svg'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import svg from '@comfortdelgro/compass-icons/iconify/file/svg'
;<Icon icon={svg} width={40} height={40} />
aep-gray
aep-solid
aep
ai-gray
ai-solid
ai
audio-gray
audio-solid
audio
avi-gray
avi-solid
avi
code-gray
code-solid
code
css-gray
css-solid
css
csv-gray
csv-solid
csv
dmg-gray
dmg-solid
dmg
doc-gray
doc-solid
doc
document-gray
document-solid
document
docx-gray
docx-solid
docx
empty-gray
empty-solid
empty
esp-gray
esp-solid
esp
exe-gray
exe-solid
exe
fig-gray
fig-solid
fig
folder-gray
folder-solid
folder
gif-gray
gif-solid
gif
html-gray
html-solid
html
image-gray
image-solid
image
img-gray
img-solid
img
indd-gray
indd-solid
indd
java-gray
java-solid
java
jpeg-gray
jpeg-solid
jpeg
jpg-gray
jpg-solid
jpg
js-gray
js-solid
js
json-gray
json-solid
json
mkv-gray
mkv-solid
mkv
mp3-gray
mp3-solid
mp3
mp4-gray
mp4-solid
mp4
mpeg-gray
mpeg-solid
mpeg
pdf-gray
pdf-solid
pdf
pdf2-gray
pdf2-solid
pdf2
png-gray
png-solid
png
psd-gray
psd-solid
psd
ptt-gray
ptt-solid
ptt
pttx-gray
pttx-solid
pttx
rar-gray
rar-solid
rar
rss-gray
rss-solid
rss
spreadsheet-gray
spreadsheet-solid
spreadsheet
sql-gray
sql-solid
sql
svg-gray
svg-solid
svg
tiff-gray
tiff-solid
tiff
txt-gray
txt-solid
txt
video01-gray
video01-solid
video01
video02-gray
video02-solid
video02
wav-gray
wav-solid
wav
webp-gray
webp-solid
webp
xlsx-gray
xlsx-solid
xlsx
xml-gray
xml-solid
xml
zip-gray
zip-solid
zip
Typescript
<AepGray width={40} height={40} /> 
<Icon icon={aepGray} width={40} height={40} /> 

<AepSolid width={40} height={40} /> 
<Icon icon={aepSolid} width={40} height={40} /> 

<Aep width={40} height={40} /> 
<Icon icon={aep} width={40} height={40} /> 

<AiGray width={40} height={40} /> 
<Icon icon={aiGray} width={40} height={40} /> 

<AiSolid width={40} height={40} /> 
<Icon icon={aiSolid} width={40} height={40} /> 

<Ai width={40} height={40} /> 
<Icon icon={ai} width={40} height={40} /> 

<AudioGray width={40} height={40} /> 
<Icon icon={audioGray} width={40} height={40} /> 

<AudioSolid width={40} height={40} /> 
<Icon icon={audioSolid} width={40} height={40} /> 

<Audio width={40} height={40} /> 
<Icon icon={audio} width={40} height={40} /> 

<AviGray width={40} height={40} /> 
<Icon icon={aviGray} width={40} height={40} /> 

<AviSolid width={40} height={40} /> 
<Icon icon={aviSolid} width={40} height={40} /> 

<Avi width={40} height={40} /> 
<Icon icon={avi} width={40} height={40} /> 

<CodeGray width={40} height={40} /> 
<Icon icon={codeGray} width={40} height={40} /> 

<CodeSolid width={40} height={40} /> 
<Icon icon={codeSolid} width={40} height={40} /> 

<Code width={40} height={40} /> 
<Icon icon={code} width={40} height={40} /> 

<CssGray width={40} height={40} /> 
<Icon icon={cssGray} width={40} height={40} /> 

<CssSolid width={40} height={40} /> 
<Icon icon={cssSolid} width={40} height={40} /> 

<Css width={40} height={40} /> 
<Icon icon={css} width={40} height={40} /> 

<CsvGray width={40} height={40} /> 
<Icon icon={csvGray} width={40} height={40} /> 

<CsvSolid width={40} height={40} /> 
<Icon icon={csvSolid} width={40} height={40} /> 

<Csv width={40} height={40} /> 
<Icon icon={csv} width={40} height={40} /> 

<DmgGray width={40} height={40} /> 
<Icon icon={dmgGray} width={40} height={40} /> 

<DmgSolid width={40} height={40} /> 
<Icon icon={dmgSolid} width={40} height={40} /> 

<Dmg width={40} height={40} /> 
<Icon icon={dmg} width={40} height={40} /> 

<DocGray width={40} height={40} /> 
<Icon icon={docGray} width={40} height={40} /> 

<DocSolid width={40} height={40} /> 
<Icon icon={docSolid} width={40} height={40} /> 

<Doc width={40} height={40} /> 
<Icon icon={doc} width={40} height={40} /> 

<DocumentGray width={40} height={40} /> 
<Icon icon={documentGray} width={40} height={40} /> 

<DocumentSolid width={40} height={40} /> 
<Icon icon={documentSolid} width={40} height={40} /> 

<Document width={40} height={40} /> 
<Icon icon={document} width={40} height={40} /> 

<DocxGray width={40} height={40} /> 
<Icon icon={docxGray} width={40} height={40} /> 

<DocxSolid width={40} height={40} /> 
<Icon icon={docxSolid} width={40} height={40} /> 

<Docx width={40} height={40} /> 
<Icon icon={docx} width={40} height={40} /> 

<EmptyGray width={40} height={40} /> 
<Icon icon={emptyGray} width={40} height={40} /> 

<EmptySolid width={40} height={40} /> 
<Icon icon={emptySolid} width={40} height={40} /> 

<Empty width={40} height={40} /> 
<Icon icon={empty} width={40} height={40} /> 

<EspGray width={40} height={40} /> 
<Icon icon={espGray} width={40} height={40} /> 

<EspSolid width={40} height={40} /> 
<Icon icon={espSolid} width={40} height={40} /> 

<Esp width={40} height={40} /> 
<Icon icon={esp} width={40} height={40} /> 

<ExeGray width={40} height={40} /> 
<Icon icon={exeGray} width={40} height={40} /> 

<ExeSolid width={40} height={40} /> 
<Icon icon={exeSolid} width={40} height={40} /> 

<Exe width={40} height={40} /> 
<Icon icon={exe} width={40} height={40} /> 

<FigGray width={40} height={40} /> 
<Icon icon={figGray} width={40} height={40} /> 

<FigSolid width={40} height={40} /> 
<Icon icon={figSolid} width={40} height={40} /> 

<Fig width={40} height={40} /> 
<Icon icon={fig} width={40} height={40} /> 

<FolderGray width={40} height={40} /> 
<Icon icon={folderGray} width={40} height={40} /> 

<FolderSolid width={40} height={40} /> 
<Icon icon={folderSolid} width={40} height={40} /> 

<Folder width={40} height={40} /> 
<Icon icon={folder} width={40} height={40} /> 

<GifGray width={40} height={40} /> 
<Icon icon={gifGray} width={40} height={40} /> 

<GifSolid width={40} height={40} /> 
<Icon icon={gifSolid} width={40} height={40} /> 

<Gif width={40} height={40} /> 
<Icon icon={gif} width={40} height={40} /> 

<HtmlGray width={40} height={40} /> 
<Icon icon={htmlGray} width={40} height={40} /> 

<HtmlSolid width={40} height={40} /> 
<Icon icon={htmlSolid} width={40} height={40} /> 

<Html width={40} height={40} /> 
<Icon icon={html} width={40} height={40} /> 

<ImageGray width={40} height={40} /> 
<Icon icon={imageGray} width={40} height={40} /> 

<ImageSolid width={40} height={40} /> 
<Icon icon={imageSolid} width={40} height={40} /> 

<Image width={40} height={40} /> 
<Icon icon={image} width={40} height={40} /> 

<ImgGray width={40} height={40} /> 
<Icon icon={imgGray} width={40} height={40} /> 

<ImgSolid width={40} height={40} /> 
<Icon icon={imgSolid} width={40} height={40} /> 

<Img width={40} height={40} /> 
<Icon icon={img} width={40} height={40} /> 

<InddGray width={40} height={40} /> 
<Icon icon={inddGray} width={40} height={40} /> 

<InddSolid width={40} height={40} /> 
<Icon icon={inddSolid} width={40} height={40} /> 

<Indd width={40} height={40} /> 
<Icon icon={indd} width={40} height={40} /> 

<JavaGray width={40} height={40} /> 
<Icon icon={javaGray} width={40} height={40} /> 

<JavaSolid width={40} height={40} /> 
<Icon icon={javaSolid} width={40} height={40} /> 

<Java width={40} height={40} /> 
<Icon icon={java} width={40} height={40} /> 

<JpegGray width={40} height={40} /> 
<Icon icon={jpegGray} width={40} height={40} /> 

<JpegSolid width={40} height={40} /> 
<Icon icon={jpegSolid} width={40} height={40} /> 

<Jpeg width={40} height={40} /> 
<Icon icon={jpeg} width={40} height={40} /> 

<JpgGray width={40} height={40} /> 
<Icon icon={jpgGray} width={40} height={40} /> 

<JpgSolid width={40} height={40} /> 
<Icon icon={jpgSolid} width={40} height={40} /> 

<Jpg width={40} height={40} /> 
<Icon icon={jpg} width={40} height={40} /> 

<JsGray width={40} height={40} /> 
<Icon icon={jsGray} width={40} height={40} /> 

<JsSolid width={40} height={40} /> 
<Icon icon={jsSolid} width={40} height={40} /> 

<Js width={40} height={40} /> 
<Icon icon={js} width={40} height={40} /> 

<JsonGray width={40} height={40} /> 
<Icon icon={jsonGray} width={40} height={40} /> 

<JsonSolid width={40} height={40} /> 
<Icon icon={jsonSolid} width={40} height={40} /> 

<Json width={40} height={40} /> 
<Icon icon={json} width={40} height={40} /> 

<MkvGray width={40} height={40} /> 
<Icon icon={mkvGray} width={40} height={40} /> 

<MkvSolid width={40} height={40} /> 
<Icon icon={mkvSolid} width={40} height={40} /> 

<Mkv width={40} height={40} /> 
<Icon icon={mkv} width={40} height={40} /> 

<Mp3Gray width={40} height={40} /> 
<Icon icon={mp3Gray} width={40} height={40} /> 

<Mp3Solid width={40} height={40} /> 
<Icon icon={mp3Solid} width={40} height={40} /> 

<Mp3 width={40} height={40} /> 
<Icon icon={mp3} width={40} height={40} /> 

<Mp4Gray width={40} height={40} /> 
<Icon icon={mp4Gray} width={40} height={40} /> 

<Mp4Solid width={40} height={40} /> 
<Icon icon={mp4Solid} width={40} height={40} /> 

<Mp4 width={40} height={40} /> 
<Icon icon={mp4} width={40} height={40} /> 

<MpegGray width={40} height={40} /> 
<Icon icon={mpegGray} width={40} height={40} /> 

<MpegSolid width={40} height={40} /> 
<Icon icon={mpegSolid} width={40} height={40} /> 

<Mpeg width={40} height={40} /> 
<Icon icon={mpeg} width={40} height={40} /> 

<PdfGray width={40} height={40} /> 
<Icon icon={pdfGray} width={40} height={40} /> 

<PdfSolid width={40} height={40} /> 
<Icon icon={pdfSolid} width={40} height={40} /> 

<Pdf width={40} height={40} /> 
<Icon icon={pdf} width={40} height={40} /> 

<Pdf2Gray width={40} height={40} /> 
<Icon icon={pdf2Gray} width={40} height={40} /> 

<Pdf2Solid width={40} height={40} /> 
<Icon icon={pdf2Solid} width={40} height={40} /> 

<Pdf2 width={40} height={40} /> 
<Icon icon={pdf2} width={40} height={40} /> 

<PngGray width={40} height={40} /> 
<Icon icon={pngGray} width={40} height={40} /> 

<PngSolid width={40} height={40} /> 
<Icon icon={pngSolid} width={40} height={40} /> 

<Png width={40} height={40} /> 
<Icon icon={png} width={40} height={40} /> 

<PsdGray width={40} height={40} /> 
<Icon icon={psdGray} width={40} height={40} /> 

<PsdSolid width={40} height={40} /> 
<Icon icon={psdSolid} width={40} height={40} /> 

<Psd width={40} height={40} /> 
<Icon icon={psd} width={40} height={40} /> 

<PttGray width={40} height={40} /> 
<Icon icon={pttGray} width={40} height={40} /> 

<PttSolid width={40} height={40} /> 
<Icon icon={pttSolid} width={40} height={40} /> 

<Ptt width={40} height={40} /> 
<Icon icon={ptt} width={40} height={40} /> 

<PttxGray width={40} height={40} /> 
<Icon icon={pttxGray} width={40} height={40} /> 

<PttxSolid width={40} height={40} /> 
<Icon icon={pttxSolid} width={40} height={40} /> 

<Pttx width={40} height={40} /> 
<Icon icon={pttx} width={40} height={40} /> 

<RarGray width={40} height={40} /> 
<Icon icon={rarGray} width={40} height={40} /> 

<RarSolid width={40} height={40} /> 
<Icon icon={rarSolid} width={40} height={40} /> 

<Rar width={40} height={40} /> 
<Icon icon={rar} width={40} height={40} /> 

<RssGray width={40} height={40} /> 
<Icon icon={rssGray} width={40} height={40} /> 

<RssSolid width={40} height={40} /> 
<Icon icon={rssSolid} width={40} height={40} /> 

<Rss width={40} height={40} /> 
<Icon icon={rss} width={40} height={40} /> 

<SpreadsheetGray width={40} height={40} /> 
<Icon icon={spreadsheetGray} width={40} height={40} /> 

<SpreadsheetSolid width={40} height={40} /> 
<Icon icon={spreadsheetSolid} width={40} height={40} /> 

<Spreadsheet width={40} height={40} /> 
<Icon icon={spreadsheet} width={40} height={40} /> 

<SqlGray width={40} height={40} /> 
<Icon icon={sqlGray} width={40} height={40} /> 

<SqlSolid width={40} height={40} /> 
<Icon icon={sqlSolid} width={40} height={40} /> 

<Sql width={40} height={40} /> 
<Icon icon={sql} width={40} height={40} /> 

<SvgGray width={40} height={40} /> 
<Icon icon={svgGray} width={40} height={40} /> 

<SvgSolid width={40} height={40} /> 
<Icon icon={svgSolid} width={40} height={40} /> 

<Svg width={40} height={40} /> 
<Icon icon={svg} width={40} height={40} /> 

<TiffGray width={40} height={40} /> 
<Icon icon={tiffGray} width={40} height={40} /> 

<TiffSolid width={40} height={40} /> 
<Icon icon={tiffSolid} width={40} height={40} /> 

<Tiff width={40} height={40} /> 
<Icon icon={tiff} width={40} height={40} /> 

<TxtGray width={40} height={40} /> 
<Icon icon={txtGray} width={40} height={40} /> 

<TxtSolid width={40} height={40} /> 
<Icon icon={txtSolid} width={40} height={40} /> 

<Txt width={40} height={40} /> 
<Icon icon={txt} width={40} height={40} /> 

<Video01Gray width={40} height={40} /> 
<Icon icon={video01Gray} width={40} height={40} /> 

<Video01Solid width={40} height={40} /> 
<Icon icon={video01Solid} width={40} height={40} /> 

<Video01 width={40} height={40} /> 
<Icon icon={video01} width={40} height={40} /> 

<Video02Gray width={40} height={40} /> 
<Icon icon={video02Gray} width={40} height={40} /> 

<Video02Solid width={40} height={40} /> 
<Icon icon={video02Solid} width={40} height={40} /> 

<Video02 width={40} height={40} /> 
<Icon icon={video02} width={40} height={40} /> 

<WavGray width={40} height={40} /> 
<Icon icon={wavGray} width={40} height={40} /> 

<WavSolid width={40} height={40} /> 
<Icon icon={wavSolid} width={40} height={40} /> 

<Wav width={40} height={40} /> 
<Icon icon={wav} width={40} height={40} /> 

<WebpGray width={40} height={40} /> 
<Icon icon={webpGray} width={40} height={40} /> 

<WebpSolid width={40} height={40} /> 
<Icon icon={webpSolid} width={40} height={40} /> 

<Webp width={40} height={40} /> 
<Icon icon={webp} width={40} height={40} /> 

<XlsxGray width={40} height={40} /> 
<Icon icon={xlsxGray} width={40} height={40} /> 

<XlsxSolid width={40} height={40} /> 
<Icon icon={xlsxSolid} width={40} height={40} /> 

<Xlsx width={40} height={40} /> 
<Icon icon={xlsx} width={40} height={40} /> 

<XmlGray width={40} height={40} /> 
<Icon icon={xmlGray} width={40} height={40} /> 

<XmlSolid width={40} height={40} /> 
<Icon icon={xmlSolid} width={40} height={40} /> 

<Xml width={40} height={40} /> 
<Icon icon={xml} width={40} height={40} /> 

<ZipGray width={40} height={40} /> 
<Icon icon={zipGray} width={40} height={40} /> 

<ZipSolid width={40} height={40} /> 
<Icon icon={zipSolid} width={40} height={40} /> 

<Zip width={40} height={40} /> 
<Icon icon={zip} width={40} height={40} />

H5 Icons

Import and Usage

import H5AccountFilled from '@comfortdelgro/compass-icons/react/h5/h5-account-filled'
;<AddressBookOutlined width={40} height={40} />

or

import {Icon} from '@iconify/react'
import h5AccountFilled from '@comfortdelgro/compass-icons/iconify/h5/h5-account-filled'
;<Icon icon={svg} width={40} height={40} />
h5-account-filled
h5-account-outlined
h5-activities-filled
h5-activities-outlined
h5-add-heart
h5-add
h5-call
h5-circle-outlined
h5-clock
h5-close
h5-coin
h5-double-right
h5-filter
h5-heart
h5-home-filled
h5-home-outlined
h5-map
h5-marker-border-white
h5-marker-border
h5-marker
h5-notifications-filled
h5-notifications-outlined
h5-pen
h5-remove
h5-search
h5-share
h5-smile
h5-switch
Typescript
<H5AccountFilled width={40} height={40} /> 
<Icon icon={h5AccountFilled} width={40} height={40} /> 

<H5AccountOutlined width={40} height={40} /> 
<Icon icon={h5AccountOutlined} width={40} height={40} /> 

<H5ActivitiesFilled width={40} height={40} /> 
<Icon icon={h5ActivitiesFilled} width={40} height={40} /> 

<H5ActivitiesOutlined width={40} height={40} /> 
<Icon icon={h5ActivitiesOutlined} width={40} height={40} /> 

<H5AddHeart width={40} height={40} /> 
<Icon icon={h5AddHeart} width={40} height={40} /> 

<H5Add width={40} height={40} /> 
<Icon icon={h5Add} width={40} height={40} /> 

<H5Call width={40} height={40} /> 
<Icon icon={h5Call} width={40} height={40} /> 

<H5CircleOutlined width={40} height={40} /> 
<Icon icon={h5CircleOutlined} width={40} height={40} /> 

<H5Clock width={40} height={40} /> 
<Icon icon={h5Clock} width={40} height={40} /> 

<H5Close width={40} height={40} /> 
<Icon icon={h5Close} width={40} height={40} /> 

<H5Coin width={40} height={40} /> 
<Icon icon={h5Coin} width={40} height={40} /> 

<H5DoubleRight width={40} height={40} /> 
<Icon icon={h5DoubleRight} width={40} height={40} /> 

<H5Filter width={40} height={40} /> 
<Icon icon={h5Filter} width={40} height={40} /> 

<H5Heart width={40} height={40} /> 
<Icon icon={h5Heart} width={40} height={40} /> 

<H5HomeFilled width={40} height={40} /> 
<Icon icon={h5HomeFilled} width={40} height={40} /> 

<H5HomeOutlined width={40} height={40} /> 
<Icon icon={h5HomeOutlined} width={40} height={40} /> 

<H5Map width={40} height={40} /> 
<Icon icon={h5Map} width={40} height={40} /> 

<H5MarkerBorderWhite width={40} height={40} /> 
<Icon icon={h5MarkerBorderWhite} width={40} height={40} /> 

<H5MarkerBorder width={40} height={40} /> 
<Icon icon={h5MarkerBorder} width={40} height={40} /> 

<H5Marker width={40} height={40} /> 
<Icon icon={h5Marker} width={40} height={40} /> 

<H5NotificationsFilled width={40} height={40} /> 
<Icon icon={h5NotificationsFilled} width={40} height={40} /> 

<H5NotificationsOutlined width={40} height={40} /> 
<Icon icon={h5NotificationsOutlined} width={40} height={40} /> 

<H5Pen width={40} height={40} /> 
<Icon icon={h5Pen} width={40} height={40} /> 

<H5Remove width={40} height={40} /> 
<Icon icon={h5Remove} width={40} height={40} /> 

<H5Search width={40} height={40} /> 
<Icon icon={h5Search} width={40} height={40} /> 

<H5Share width={40} height={40} /> 
<Icon icon={h5Share} width={40} height={40} /> 

<H5Smile width={40} height={40} /> 
<Icon icon={h5Smile} width={40} height={40} /> 

<H5Switch width={40} height={40} /> 
<Icon icon={h5Switch} width={40} height={40} />

Props for react icons

Name Type Default Description
color string Color of the icon
height number Height of the icon
width number Width of the icon
id string Unique ID of the icon
style string Style of the icon
className CSS Class name of the icon

© 2023 CDG Zig. All rights reserved.

Privacy

Terms & Conditions